<template>
	<el-dialog v-model="props.isShow" width="26%" close-icon="CloseBold" @close="close">
		<template #header>
			<div class="text-18px font-bold">
				安全验证
			</div>
		</template>
		<div class="mb-20px">
			<div class="flex flex-col items-center">
				<img src="/person/sercity-fill-green.svg" class="w-70px h-70px">
				<p class="text-18px text-#000000 mb-10px mt-10px">身份验证</p>
				<p class="text-14px text-#86909C">为了您的账户安全，需要验证您的身份， </p>
				<p class="text-14px text-#86909C">验证通过后即可继续操作</p>
			</div>
			<div class="mt-20px">
				<p class="text-18px text-[#000] mb-10px">选择您的验证方式</p>
				<el-checkbox-group v-model="checkList"  
				@change="changeCheckList" >
					<el-checkbox label="****9089" />
					<br/>
					<el-checkbox label="谷歌令牌" />
				</el-checkbox-group>
			</div>
			<div class="mt-20px">
				<p class="text-14px text-#86909C">验证码</p>
				<div class="mt-10px flex items-center justify-between p-10px
				border-1px border-#E5E6EB border-solid rounded-10px">
					<div class="w-70%">
						<el-input placeholder="请输入验证码" />
					</div>
					<p class="text-18px text-[#000] cursor-pointer">发送验证码</p>
				</div>
			</div>
			<div class="mt-30px">
				<el-button color="#114CEE" style="font-size:18px;width:100%;height:50px;" @click="confirm"> 下一步 </el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
interface IProps {
	isShow: boolean
	setMethods: string;
}
const props = defineProps<IProps>();

const emits = defineEmits(['close', 'confirm'])

const checkList = ref<string[]>([]);

const changeCheckList = (val: any) => {
	if(checkList.value.length > 1){
		checkList.value.shift();
	}	
}

const close = () => {
	emits('close', false)
}

const confirm = () => {
	emits('confirm',props.setMethods)
}
</script>
<style lang="scss" scoped>
	::v-deep .el-checkbox{
		--el-checkbox-font-size:16px;
		--el-checkbox-text-color:#7D8592;
		--el-checkbox-checked-text-color:#7D8592;
		--el-checkbox-checked-icon-color:#114CEE;
		--el-checkbox-checked-input-border-color:#114CEE;
		--el-checkbox-checked-bg-color:#fff;
		--el-checkbox-input-height:16px;
		--el-checkbox-input-width:16px;
	}
	::v-deep .el-checkbox__inner:after{
		top:2px;
		left:5px;
	}
	::v-deep .el-input__wrapper{
		border-color:none;
		box-shadow:none;
	}
	::v-deep .el-input__inner{
		font-size:18px;
	}
</style>
